<template>
  <div class="by">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="100px"
             class="yuyi-ruleForm">
      <el-form-item label="用户组织" prop="userOrganization">
        <el-select
          v-model="ruleForm.userOrganization"
          style="width: 100%"
          clearable
          placeholder="请选择用户组织">
          <el-option
            v-for="(item, index) in qzDataSelect"
            :key="index"
            :label="item.fondsNo + '  ' + item.fondsName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="小组成员" prop="groupMembers">
        <el-select
          v-model="ruleForm.groupMembers"
          multiple
          filterable
          allow-create
          default-first-option
          style="width: 100%"
          clearable
          placeholder="请选择小组成员，可多选">
          <el-option
            v-for="(item, index) in userSelect"
            :key="index"
            :label="item.userName + ' ' + item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题名" prop="tm">
        <el-input type="textarea"
                  v-model="ruleForm.tm"
                  maxlength="500"
                  show-word-limit
                  :autosize="autosize"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   size="small"
                   :loading="loading"
                   @click="submitForm('ruleForm')">保存
        </el-button>
        <el-button size="small"
                   :loading="loading"
                   @click="resetForm('ruleForm')">重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getQzDic } from '../../../../../api/quanzong/quanzong'
import { addQzStudyList, editQzStudyList } from '../../../../../api/editStudy'

export default {
  name: 'addEditBY',
  props: {
    type: {
      type: String,
      default: ''
    },
    viewType: {
      type: String
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    userSelect: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      loading: false,
      qzDataSelect: [], // 全宗
      autosize: {
        minRows: 4,
        maxRows: 8
      },
      value: [],
      ruleForm: {
        userOrganization: '', // 用户组织
        groupMembers: [],
        tm: ''
      },
      rules: {
        tm: [
          {
            required: true,
            message: '请输入题名',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    if (this.type === 'edit') {
      this.ruleForm = this.rowData
    }
    this.getQuanzong()
  },
  watch: {
    type () {
      if (this.type === 'edit') {
        this.ruleForm = this.rowData
      }
    }
  },
  methods: {
    getQuanzong () {
      getQzDic({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        this.qzDataSelect = res.data.data.list
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.ruleForm.saveType = this.viewType
          const requet = this.type === 'add' ? addQzStudyList(this.ruleForm) : editQzStudyList(this.ruleForm)
          requet.then(() => {
            this.$message.success(this.type === 'add' ? '新增成功！' : '修改成功！')
            this.$emit('handleSuccess')
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .yuyi-ruleForm {
    padding-right: 40px;
  }
</style>
